<template>
  <div>
    <!-- <h1 id="box">state: {{ $store.state.count }}</h1> -->
    <h1 id="box">state: {{ c }}</h1>
    <!-- <h1>getters: {{ $store.getters.bigCount }}</h1> -->
    <h1>getters: {{ bigC }}</h1>
    <button @click="j(9)">按钮-触发actions</button>
    <button @click="i(4)">按钮-触发mutaions</button>
    <hr />
    <Test></Test>
  </div>
</template>

<script>
import Test from './Test.vue'
// mapState的作用: 以计算属性的形式,将vuex的数据添加到vc身上
// mapGetters的作用: 以计算属性的实行,将vuex中的getters数据添加到vc身上
// mapActions的作用: 以methods的形式,将vuex中的actions函数添加到vc身上
// mapMutations的作用: 以methods的形式,将vuex中的mutations函数添加到vc身上
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
// console.log(mapState(['count']))
export default {
  components: {
    Test,
  },
  methods: {
    // handle() {
    //   // dispatch触发的是actions中的某个函数
    //   // this.$store.dispatch('jia', 9)
    //   // commit触发的是mutation的某个函数
    //   // this.$store.commit('inc', 4)
    //   this.jia(9)
    // },
    // ...mapActions(['jia']),
    ...mapActions('zs-app', { j: 'jia' }),

    // ...mapMutations(['inc']),
    ...mapMutations('zs-app', { i: 'inc' }),
  },
  computed: {
    // ...mapState(['count']),
    ...mapState('zs-app', { c: 'count' }),

    // ...mapGetters(['bigCount']),
    ...mapGetters('zs-app', { bigC: 'bigCount' }),
  },
}
</script>

<style></style>
